<script setup>
	import { play, pause, last, next } from "../assets/index.js";
	import { ref, watch } from "vue";

	const emits = defineEmits(["change-last", "change-next"]);
	const props = defineProps({
		audio: { type: Object },
	});
	const isPlay = ref(false);

	watch(
		() => props.audio,
		(val) => {
			if (!val) return;
			val.onPlay(() => {
				isPlay.value = true;
			});
		},
		{ deep: true, immediate: true }
	);

	const onPlay = () => {
		if (!props.audio) return;
		isPlay.value = !isPlay.value;
		props.audio.paused ? props.audio.play() : props.audio.pause();
	};

	const changeLast = () => {
		emits("change-last");
	};
	const changeNext = () => {
		emits("change-next");
	};
</script>

<template>
	<section class="play-controller">
		<div class="last" @click="changeLast">
			<image
				style="
					width: 20px;
					height: 16px;
					object-fit: contain;
					margin-right: 30px;
				"
				:src="last"
			/>
		</div>
		<div class="play-pause" @click="onPlay">
			<image
				style="width: 13px; height: 12px; object-fit: contain"
				:src="isPlay ? pause : play"
			/>
		</div>
		<div class="next" @click="changeNext">
			<image
				style="
					width: 20px;
					height: 16px;
					object-fit: contain;
					margin-left: 30px;
				"
				:src="next"
			/>
		</div>
	</section>
</template>

<style scoped lang="scss">
	.play-controller {
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 25px;
		color: #fff;
	}

	.loop {
		width: 22px;
		height: 17px;
	}

	.last {
	}

	.play-pause {
		width: 70px;
		height: 70px;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		background: radial-gradient(
			200% 100% at 49% 44%,
			#4affd4 0%,
			rgba(62, 243, 200, 0) 100%
		);
	}

	.next {
	}

	.order {
	}
</style>
